let app;
let container;
let d5power;
let application;

const resizeStage = function () {
    // 获取窗口的宽度和高度
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    const contentWidth = container.dataset.contentWidth;
    const contentHeight = container.dataset.contentHeight;
    const scaleMode = container.dataset.scaleMode;

    // 调整渲染器的尺寸
    app.renderer.resize(screenWidth, screenHeight);

    // 调整舞台的缩放比例（可选）
    // 如果你希望舞台内容按比例缩放，可以设置舞台的 scale
    let scale = 1;
    if (scaleMode.toLowerCase() == "fixedheight") {
        scale = app.screen.height / contentHeight;
        D5Power.setStageSize(Math.ceil(contentWidth * scale), contentHeight)
    } else if (scaleMode.toLowerCase() == "fixedwidth") {
        scale = app.screen.width / contentWidth;
        D5Power.setStageSize(contentWidth, Math.ceil(contentHeight/scale))
    } else {
        D5Power.setStageSize(screenWidth, screenHeight);
    }

    app.stage.scale.set(scale);
}

const startAppWith3D = async function (applicationClass, uiroot = "resource/assets/ui/default/") {
    const canvas = document.getElementById("renderCanvas"); // Get the canvas element
    const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

    const createScene = function () {
        // Creates a basic Babylon Scene object
        const scene = new BABYLON.Scene(engine);
        // Creates and positions a free camera
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);

        // This positions the camera
        camera.setPosition(new BABYLON.Vector3(0, 0, -10));

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
        // Creates a light, aiming 0,1,0 - to the sky
        const light = new BABYLON.HemisphericLight("light",
            new BABYLON.Vector3(0, 1, 0), scene);
        // Dim the light a small amount - 0 to 1
        light.intensity = 0.7;
        
        // Built-in 'ground' shape.
        const ground = BABYLON.MeshBuilder.CreateGround("ground",
            { width: 6, height: 6 }, scene);
        return scene;
    };
    const scene = createScene(); //Call the createScene function

    let pixiRenderer = new PIXI.WebGLRenderer();
    pixiRenderer.init({
        context: engine._gl,
        view: engine.getRenderingCanvas(),
        clearBeforeRender: false,
        autoStart: false,
    })

    const stage = new PIXI.Container();
    const UI = new PIXI.Graphics()
    .roundRect(20, 80, 100, 100, 5)
    .roundRect(220, 80, 100, 100, 5)
    .fill(0xffff00);
    stage.addChild(UI);

    // Register a render loop to repeatedly render the scene
    engine.runRenderLoop(function () {

        scene.render();
        engine.wipeCaches(true);

        if(pixiRenderer){
            pixiRenderer.resetState();
            pixiRenderer.render(UI);
            pixiRenderer.resetState();
        }
        
    });
    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () {
        engine.resize();
    });
}

const startAPP = async function (applicationClass, uiroot = "resource/assets/ui/default/") {
    app = new PIXI.Application();
    container = document.getElementById("pixi_player")
    d5power = new D5Power(app);
    if(!container)
    {
        alert("can not find basic container #pixi_player");
        return;
    }
    await app.init({
        width: window.innerWidth,
        height: window.innerHeight,
        resolution: 1, //window.devicePixelRatio || 1
        autoDensity: true,
        resizeTo: window,
        backgroundColor: 0x2c3e50,
        hello: true,
    });
    window.addEventListener('resize', resizeStage);
    container.appendChild(app.canvas);
    d5power.initUI().then(function(d5power){
        application = new applicationClass();
        resizeStage();
        application.start();
    });
}

